<template>
	<view class="AIChat" :style="{ height: webStyle.height }">
		<scroll-view class="chat-list" scroll-y scroll-with-animation :scroll-into-view="scrollViewId">
			<view class="item" v-for="(item, index) in chatList" :key="index">
				<view :class="['info', item.userName != 'YOU' ? 'info-left' : 'info-right']">
					<view class="avatar-box">
						<view class="avatar">
							<image class="icon" :src="item.avatar" mode="widthFix"></image>
						</view>
					</view>

					<view :class="['info-cont', item.userName != 'YOU' ? 'info-cont-left' : 'info-cont-right']">
						<view class="userName">{{ item.userName }}</view>
						<view :class="['chat-cont', 'chat-cont' + item.id, item.userName != 'YOU' ? 'chat-cont-left' : 'chat-cont-right']">
							<text class="text" :user-select="true">
								{{ item.cont }}
								<text class="cursor" v-if="item.userName != 'YOU' && index == chatList.length - 1 && chatTimer">|</text>
							</text>
							<view class="item-footer" :id="'itemFooter' + item.id">
								<template>
									<view class="left">
										<template v-if="item.userName != 'YOU' && index == chatList.length - 1">
											<view class="text" @tap="resend" v-if="!chatTimer">重新回答</view>
											<view class="text" @tap="stop" v-if="chatTimer">停止回答</view>
										</template>
									</view>
									<view class="right">
										<image class="icon copy" @tap="copy(item.cont)" :src="imgPath + 'AIChat/copy' + (item.userName != 'YOU' ? '' : '_fff') + '.svg'" mode=""></image>
										<image class="icon def" @tap="useCont(item, index)" v-if="item.userName != 'YOU'" :src="imgPath + 'AIChat/icon.svg'" mode=""></image>
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="clean" @tap="dialogToggle()">清除历史记录</view>
		</scroll-view>
		<view class="ipt-box">
			<scroll-view scroll-y="true" class="ipt">
				<textarea :auto-height="true" :adjust-position="false" class="textarea" :maxlength="-1" :value="iptVal" @input="iptWatch" type="text" @tap.stop="iptTap" @blur="iptBlur" placeholder="您可以在这里输入您的问题" placeholder-class="ipt-placeholder"></textarea>
			</scroll-view>
			<view class="submit-btn" @tap="submit(null)">提问</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="同意" title="警告" content="此操作不可逆！是否清除历史记录?" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import * as api from "@/api/createVideo.js";

let iptTimer = null;
let chatTimer = null;
let dataList = []; // 保存数据流
let renderStart = false; // 开始渲染数据
let getDataEnd = false; // 获取流数据结束
let iterator = null; // 获取数据流迭代器

export default {
	name: "AIChat",
	data() {
		return {
			imgPath: tools.imgPath,
			inf0Pt: 0,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			pageH: "",
			keyboardH: 0,
			userInfo: {},
			pageInfo: {},
			chatList: [],
			iptVal: "",
			iptValTemp: "",
			scrollViewId: "",
			requestTask: null,
			chatTimer: false,
			agentItem: ""
		};
	},
	methods: {
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			this.agentItem = uni.getStorageSync("agentItem");
			uni.removeStorageSync("agentItem");
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 4.5;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},
		// 用户信息初始化
		initUserInfo() {
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
			this.userInfo.detailInfoRightList = (this.userInfo.detailInfoRightList || [])
				.filter((e) => {
					return !["AI绘画", "文案生成"].includes(e.rightsName);
				})
				.map((e) => {
					switch (e.rightsName) {
						case "AI成片":
							e.rightsDescript = "快速成片";
							break;
						case "AI变声":
							e.rightsDescript = "文本转语音";
							break;
						case "数字名片":
							e.rightsDescript = "照片说话";
							break;
					}
					return e;
				});
			// console.log(this.userInfo);
		},
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 获取页面参数
		initPageInfo(opt) {
			let pageInfo = uni.getStorageSync("AIContInfo");
			this.pageInfo = pageInfo;
			uni.removeStorageSync("AIContInfo");
		},
		// 初始化聊天内容
		async initChatList() {
			let res = await api.chat_history({
				agentId: "1804077702240792578",
				agentId: this.agentItem.id
			});
			if (!res || !res.data) return;
			console.log("初始化聊天内容", JSON.parse(res.data));
			let iptValTemp = "";
			let tempId = "";
			this.chatList = JSON.parse(res.data).map((e) => {
				tempId = tools.createID();
				if (e.role == "user") {
					iptValTemp = e.content;
				}
				return {
					id: tempId,
					avatar: e.role == "assistant" ? this.imgPath + "AIChat/yanqia.svg" : this.userInfo.terHeaderImg,
					userName: e.role == "assistant" ? this.agentItem.name : "YOU",
					cont: e.content
				};
			});
			this.iptValTemp = iptValTemp;
			await new Promise((sleep) => setTimeout(sleep, 520));
			this.scrollViewId = "itemFooter" + tempId;
			if (this.scrollViewId != "") {
				await new Promise((sleep) => setTimeout(sleep, 1886));
				this.scrollViewId = "";
			}
			// this.chatList = [
			// 	{
			// 		id: tools.createID(),
			// 		avatar: this.imgPath + "AIChat/yanqia.svg",
			// 		userName: this.agentItem.name,
			// 		cont: "您好，我是！"
			// 	},
			// 	{
			// 		id: tools.createID(),
			// 		avatar: this.imgPath + "AIChat/yanqia.svg",
			// 		userName: this.agentItem.name,
			// 		cont: "您好，我是言洽AI语言大模型，我能回答您的所有问题，您可以在下方的输入框中向我提问！"
			// 	},
			// 	{
			// 		id: tools.createID(),
			// 		avatar: this.userInfo.terHeaderImg,
			// 		userName: "YOU",
			// 		cont: "贵阳"
			// 	},
			// 	{
			// 		id: tools.createID(),
			// 		avatar: this.imgPath + "AIChat/yanqia.svg",
			// 		userName: this.agentItem.name,
			// 		cont: "贵阳市是贵州省的政治、经济、文化、科教、交通中心，西南地区重要的交通和通信枢纽、工业基地及商贸旅游服务中心。是国家大数据产业发展集聚区，国家大数据综合试验区核心区。"
			// 	}
			// ];
		},
		// 清除历史记录
		async cleanHistory() {
			let res = await api.chat_clean_history({
				agentId: this.agentItem.id
			});
			if (!res) {
				tools.easyToast("清除失败，请重试!");
			} else {
				tools.easyToast("清除成功!");
				this.initChatList();
			}
		},
		// 提示消息打开
		dialogToggle() {
			this.$refs.alertDialog.open();
		},
		// 提示消息确定
		dialogConfirm() {
			this.$refs.alertDialog.close();
			this.cleanHistory();
		},
		// 提示消息取消
		dialogClose() {
			this.$refs.alertDialog.close();
		},
		// 文案点击
		iptTap() {
			this.keyboardH = 1;
		},
		// 文案失焦
		iptBlur() {
			this.keyboardH = 0;
		},
		// 文案改变
		iptWatch(e) {
			if (iptTimer) {
				clearTimeout(iptTimer);
			}
			iptTimer = setTimeout(() => {
				this.iptVal = e.detail.value;
				iptTimer = null;
			}, 688);
		},
		// 重新回答
		async resend() {
			this.iptVal = this.iptValTemp;
			await new Promise((next) => setTimeout(next, 300));
			this.submit();
		},
		// 停止回答
		stop() {
			chatTimer = null;
			this.chatTimer = false;
			getDataEnd = true;
			// #ifdef MP-WEIXIN
			this.requestTask?.abort();
			// #endif
			// #ifndef MP-WEIXIN
			this.requestTask?.close();
			// #endif
		},
		// 提交
		async submit() {
			if (this.chatTimer || iptTimer) return;
			const that = this;
			// 防止误触
			that.chatTimer = chatTimer = true;

			// 渲染用户话语
			let obj = {
				id: tools.createID(),
				avatar: that.userInfo.terHeaderImg,
				userName: "YOU",
				cont: that.iptVal
			};
			that.chatList.push(obj);
			that.iptValTemp = that.iptVal;
			that.iptVal = "";

			// 聊天界面滚到底部
			that.scrollViewId = "itemFooter" + obj.id;
			if (that.scrollViewId != "") {
				await new Promise((sleep) => setTimeout(sleep, 1886));
				that.scrollViewId = "";
			}

			// 渲染流程开始
			console.log("渲染流程开始~");
			// 渲染后端数据对话框
			let obj2 = {
				id: tools.createID(),
				avatar: that.imgPath + "AIChat/yanqia.svg",
				userName: this.agentItem.name,
				cont: ""
			};
			that.chatList.push(obj2);
			that.scrollViewId = "itemFooter" + obj2.id;
			if (that.scrollViewId != "") {
				await new Promise((sleep) => setTimeout(sleep, 520));
				that.scrollViewId = "";
			}

			let resList = await new Promise(async (resolve) => {
				dataList = []; // 保存数据流
				renderStart = false; // 开始渲染数据
				getDataEnd = false; // 获取流数据结束
				iterator = dataList[Symbol.iterator](); // 获取数据流迭代器

				// 渲染数据流
				const renderFn = async (iteratorItem, currInd, aaa) => {
					if (!iteratorItem.value?.obj2Id) {
						return;
					}
					// 缓存当前渲染索引
					let newInd = currInd;
					// 缓存数据列表
					let tempList = JSON.parse(JSON.stringify(dataList));
					// 获取聊天列表索引
					let ind = that.chatList.findIndex((e) => e.id == iteratorItem.value.obj2Id);

					if (!iteratorItem.value.isRender) {
						// 表示此数据已渲染(下面是渲染过程)
						iteratorItem.value.isRender = true;

						// 渲染过程=========
						// 获取渲染索引 (用来逐字渲染时从该索引位置渲染)
						currInd = currInd || that.chatList[ind].cont.length;

						// 逐字展示实现,更新当前渲染索引
						newInd = await that.showTextLoop(that.chatList[ind], that.chatList[ind].cont + iteratorItem.value.text, currInd);
						// 渲染过程结束======
					}

					// 获取后端数据流索引（用来判断当前渲染状态）
					let dataInd = tempList.findIndex((e) => e.id == iteratorItem.value.id);

					if (dataInd == tempList.length - 1) {
						// 这里表示数据列表渲染完成，等待新的后端数据返回，轮询时间为1秒
						await new Promise((sleep) => setTimeout(sleep, 1000));

						// 递归结束,后端数据已全部获取，数据渲染也全部完成
						// console.log("递归结束,后端数据已全部获取", {newInd, getDataEnd, dataInd, dataList,tempList});
						if (newInd == -1 || (dataList.length == tempList.length && getDataEnd)) {
							console.log("渲染流程结束！");
							chatTimer = null;
							that.chatTimer = false;
							return true;
						}

						// 重新等待
						return renderFn(iteratorItem, newInd, "111");
					} else {
						// 这里表示数据列表未完成，执行下一个数据渲染
						return renderFn(iterator.next(), newInd, "222");
					}
				};

				// 开始发送数据
				const token = uni.getStorageSync("token") || uni.getStorageSync("_token");

				// #ifndef MP-WEIXIN
				let wsState = "close";
				let wsId = tools.createID();
				let ws = uni.connectSocket({
					url: "ws://175.178.252.101/ws",
					header: {
						Authorization: token,
						"content-type": "application/json"
					},
					// protocols: ["protocol1"],
					multiple: true,
					method: "GET",
					success(res) {
						console.log("ws-succ", res);
					},
					fail(err) {
						uni.hideLoading();
						console.log("ws-fail", err);
					},
					complete() {}
				});
				ws.onOpen((res) => {
					console.log("ws-onOpen", res);
					ws.send({
						data: JSON.stringify({
							msgType: "addUser",
							msgCont: {
								userId: wsId,
								token: token
							}
						})
					});
					wsState = "open";
				});
				ws.onError((err) => {
					console.log("ws-onError", err);
					getDataEnd = true; // 获取流数据结束
					wsState = "close";
				});
				ws.onClose((res) => {
					console.log("ws-onClose", res);
					getDataEnd = true; // 获取流数据结束
					wsState = "close";
				});
				ws.onMessage((res) => {
					// console.log("ws-onMessage", res, res.data);
					if (res.data == "addSuccess") {
						console.log("发起请求！");
						ws.send({
							data: JSON.stringify({
								msgType: "proxy-request",
								msgCont: {
									url: "https://ai.yainoo.com/api/aiwork/chat/chat_streamv8",
									method: "POST",
									data: {
										agentId: "1804077702240792578",
										agentId: this.agentItem.id,
										userInput: obj.cont
									},
									header: {
										Authorization: token,
										"Content-Type": "application/json",
										Accept: "text/event-stream"
										// Accept: "application/json, text/plain, */*"
									}
								}
							})
						});
					} else {
						let msgData = JSON.parse(res.data);
						switch (msgData.msgType) {
							case "dataItem":
								console.log(msgData.msgCont);
								// 修改数据体
								// let resObj = {
								// 	id: tools.createID(),
								// 	data: msgData.msgCont,
								// 	// text: text.slice(text.lastIndexOf("data:")).slice(6),
								// 	text: msgData.msgCont.replace(/\\n/g, "\n"),
								// 	isRender: false
								// };
								// dataList.push(resObj);
								// console.log("resObj:", resObj);
								// if (!renderStart) {
								// 	uni.hideLoading();
								// 	renderStart = true; // 开始渲染后端流数据
								// 	let iteratorItem = iterator.next();
								// 	renderFn(iteratorItem);
								// }
								// 修改数据体
								let resObj = {
									id: tools.createID(),
									obj2Id: obj2.id,
									data: msgData.msgCont,
									// text: text.slice(text.lastIndexOf("data:")).slice(6),
									text: msgData.msgCont.replace(/\\n/g, "\n"),
									isRender: false
								};
								dataList.push(resObj);
								console.log("resObj:", resObj);
								if (!renderStart) {
									renderStart = true; // 开始渲染后端流数据
									let iteratorItem = iterator.next();
									renderFn(iteratorItem);
								}
								break;
							case "end":
								console.log(msgData.msgCont);
								getDataEnd = true; // 获取流数据结束
								ws.close();
								break;
							default:
								break;
						}
					}
				});
				// 将ws应用到全局，方便中断请求
				this.requestTask = ws;
				// #endif
				// #ifdef MP-WEIXIN
				let requestTask = uni.request({
					url: "https://ai.yainoo.com/api/aiwork/chat/chat_streamv8",
					// url: "http://111.0.112.226:18762/chat_stream",
					// url: "http://localhost:3000/stream",
					method: "POST",
					responseType: "text",
					enableChunked: true, // 开启流传输
					header: {
						Authorization: token,
						Accept: "application/json, text/plain, */*"
					},
					data: {
						agentId: "1804077702240792578",
						agentId: this.agentItem.id,
						userInput: obj.cont
					},
					success(res) {
						console.log(res);
						getDataEnd = true; // 获取流数据结束
						// #ifndef MP-WEIXIN
						let content = res.data
							.replace(/↵/g, "\n")
							.match(/(data:)?(.*)(\n\n)?/g)
							?.map((e) => {
								if (!e) return "";
								let startInd = 0;
								let endInd = e.length;
								if (/data:/.test(e)) {
									startInd = 5;
								}
								if (/\n\n/.test(e)) {
									endInd = -2;
								}
								let resVal = e.slice(startInd, endInd);
								return resVal.replace(/\\n/g, "\n");
							})
							.join("");
						// 修改数据体
						let resObj = {
							id: tools.createID(),
							obj2Id: obj2.id,
							data: content,
							text: content,
							isRender: false
						};
						dataList.push(resObj);
						if (!renderStart) {
							renderStart = true; // 开始渲染后端流数据
							let iteratorItem = iterator.next();
							renderFn(iteratorItem);
						}
						// #endif
					},
					fail(err) {
						console.log(err);
						chatTimer = null;
						that.chatTimer = false;
						if (err.errMsg != "request:fail abort") {
							tools.easyToast("网络出错!");
							let ind = that.chatList.findIndex((e) => e.id == obj2.id);
							that.chatList[ind].cont = "网络出错!";
						} else {
							tools.easyToast("请求中断!");
						}
						getDataEnd = true; // 获取流数据结束
					}
				});

				// 获取到响应头
				requestTask.onHeadersReceived((res) => {
					console.log(res.header);
				});

				// 获取到响应数据
				requestTask.onChunkReceived(async (res) => {
					// arraybuffer转string
					const uint8Array = new Uint8Array(res.data);
					let text = String.fromCharCode.apply(null, uint8Array);
					text = decodeURIComponent(escape(text));

					// 修改数据体
					let resObj = {
						id: tools.createID(),
						obj2Id: obj2.id,
						data: text,
						// text: text.slice(text.lastIndexOf("data:")).slice(6),
						text: text
							.replace(/↵/g, "\n")
							.match(/(data:)?(.*)(\n\n)?/g)
							?.map((e) => {
								if (!e) return "";
								let startInd = 0;
								let endInd = e.length;
								if (/data:/.test(e)) {
									startInd = 5;
								}
								if (/\n\n/.test(e)) {
									endInd = -2;
								}
								let resVal = e.slice(startInd, endInd);
								return resVal.replace(/\\n/g, "\n");
							})
							.join(""),
						isRender: false
					};
					dataList.push(resObj);
					console.log("resObj:", resObj);
					if (!renderStart) {
						renderStart = true; // 开始渲染后端流数据
						let iteratorItem = iterator.next();
						renderFn(iteratorItem);
					}
				});

				// 将requestTask应用到全局，方便中断请求
				this.requestTask = requestTask;
				// #endif
			});
		},

		// 逐字展示效果实现
		showTextLoop(inputEl, text, currInd = 0) {
			let ind = currInd; // 渲染索引
			let renderText = text; // 渲染内容
			return new Promise((next) => {
				let time = tools.randomNum(10, 20); // 设置渲染时间间隔 10~20毫秒
				setTimeout(async () => {
					// 此时可能因为网络问题或者后端服务器奔溃，直接结束流程
					if (!this.chatTimer || !chatTimer) {
						next(-1);
						return -1;
					}

					ind++; // 更新渲染索引
					this.$set(inputEl, "cont", renderText.slice(0, ind)); // 渲染数据

					// 聊天界面滚到底部实现===========
					let selector = "chat-cont" + inputEl.id; // 滚动到该元素
					// 获取该元素
					let el = await new Promise(async (next) => {
						this.$nextTick(async () => {
							let el = await tools.getNode(uni, "." + selector);
							next(el);
						});
					});

					if (!chatTimer[0]) {
						chatTimer = [el.height, el.height]; // 缓存元素高度
					} else {
						chatTimer[1] = el.height; // 更新元素高度
						// 判断元素高度是否变化，如果变化就重新滚到底部
						if (chatTimer[0] != chatTimer[1]) {
							chatTimer[0] = chatTimer[1];
							this.scrollViewId = "itemFooter" + inputEl.id;
						} else {
							if (this.scrollViewId != "") {
								await new Promise((sleep) => setTimeout(sleep, 520));
								this.scrollViewId = "";
							}
						}
					}
					// 聊天界面滚到底部实现结束=========

					// 递归结束
					if (ind >= renderText.length) {
						next(ind);
						return ind;
					}

					// 开始下一个字渲染
					let newInd = await this.showTextLoop(inputEl, text, ind);

					// console.log("逐字展示效果实现22", { newInd });
					next(newInd);
					return newInd;
				}, time);
			});
		},
		// 复制
		copy(text = "") {
			uni.setClipboardData({
				data: text,
				success() {
					tools.easyToast("复制成功！");
				},
				fail(err) {
					console.log(err);
				}
			});
		},
		// 使用文本
		useCont(item, index) {
			uni.setStorageSync("aiCont", {
				updateType: "AiCont",
				cont: item.cont
			});
			let pages = getCurrentPages();
			let pageInd = -1;
			switch (this.pageInfo?.toPage) {
				case "index/2": //AI文案
					let [pageName, footerBarListAc] = this.pageInfo.toPage.split("/");
					uni.setStorageSync("toHome", {
						footerBarListAc: footerBarListAc
					});
					pageInd = pages.findIndex((e) => e.route == "pages/index/index");
					if (pageInd != -1) {
						uni.navigateBack({
							delta: pages.length - (pageInd + 1)
						});
					} else {
						uni.reLaunch({
							url: `/pages/${pageName}/${pageName}`
						});
					}
					break;
				default:
					pageInd = pages.findIndex((e) => e.route == "pages/createVideo/createVideo");
					console.log(pageInd, "/pages/createVideo/createVideo", pages);
					if (pageInd != -1) {
						uni.navigateBack({
							delta: pages.length - (pageInd + 1)
						});
					} else {
						this.toPage("/pages/createVideo/createVideo", "reLaunch");
					}
					break;
			}
		}
	},
	onLoad(option) {
		this.initSystemInfo();
		this.initUserInfo();
		this.initPageInfo(option);
		this.initChatList();
	}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0vw !important;
	height: 0vw !important;
	display: none;
}

.AIChat {
	width: 100vw;
	background: rgba(7, 7, 9, 1);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	// padding: 5vw 2vw 0vw;

	.chat-list {
		width: 96vw;
		margin: 5vw auto 0vw;
		flex: 1;
		overflow: auto;
		box-sizing: border-box;
		padding: 3vw;
		border-radius: 3vw 3vw 0vw 0vw;
		background: rgba(230, 242, 240, 1);
		.item {
			width: 100%;
			margin: 3vw 0vw;
			.info {
				width: 100%;
				display: flex;
				&.info-right {
					flex-direction: row-reverse;
				}
				.avatar {
					--size: 10vw;
					width: var(--size);
					height: var(--size);
					display: flex;
					justify-content: center;
					align-items: center;
					background: #fff;
					border-radius: 1.5vw;
					.icon {
						width: 68%;
					}
				}

				.info-cont {
					padding: 0vw 3vw;
					flex: 1;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					&.info-cont-right {
						align-items: flex-start;
					}
					&.info-cont-right {
						align-items: flex-end;
					}
					.userName {
						font-size: 3.86vw;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
			.chat-cont {
				// background: #fff;
				box-sizing: border-box;
				padding: 2vw 2.5vw;
				text-align: justify;
				font-size: 4.16vw;
				word-break: break-all;
				color: rgba(51, 51, 51, 1);
				margin: 2vw 0vw;
				width: max-content;
				max-width: 100%;
				min-width: 20vw;

				&.chat-cont-left {
					background: rgba(234, 247, 255, 1);
					box-shadow: 2px 1px 3px #52db97;
					border-radius: 0vw 3.5vw 3.5vw 3.5vw;
				}
				&.chat-cont-right {
					color: #fff;
					// background: linear-gradient(217.51deg, rgba(0, 255, 174, 1) 0%, rgba(27, 161, 250, 1) 100%);
					background: #48bf99;
					border-radius: 3.5vw 0vw 3.5vw 3.5vw;
				}
				.cursor {
					font-weight: 700;
					animation: cursor 1s infinite;
				}
				.item-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 3vw;
					padding-top: 3vw;
					border-top: 1px solid rgba(0, 0, 0, 0.168);

					.left {
						display: flex;
						align-items: center;
						.text {
							font-size: 14px;
							font-weight: 400;
							letter-spacing: 0px;
							line-height: 20.27px;
							color: rgba(0, 153, 127, 1);
							text-align: left;
							vertical-align: top;
						}
					}
					.right {
						display: flex;
						align-items: center;
						.icon {
							width: 5vw;
							height: 5vw;
							margin-left: 2vw;
						}
					}
				}
			}
		}
		.clean {
			text-align: center;
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 20.27px;
			color: rgba(0, 153, 127, 1);
		}
	}

	.ipt-box {
		width: 100vw;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 3vw 3vw 0vw 0vw;
		background: linear-gradient(180deg, rgba(36, 67, 67, 1) 0%, rgba(34, 37, 43, 1) 100%);
		box-sizing: border-box;
		padding: 2vw 2vw 12vw;

		.ipt {
			flex: 1;
			border-radius: 5vw;
			border: 1px solid rgba(0, 153, 127, 1);
			background: rgba(0, 153, 127, 0.2);
			display: flex;
			align-items: center;
			// height: auto;
			font-size: 4vw;
			box-sizing: border-box;
			padding: 2.5vw 3vw;
			color: #fff;
			overflow: auto;
			max-height: 30vh;
			.textarea {
				width: 100%;
			}
		}

		.ipt-placeholder {
			color: rgba(0, 153, 127, 1);
		}

		.submit-btn {
			padding: 2.5vw 3vw;
			font-size: 4vw;
			font-weight: 500;
			color: rgba(22, 24, 30, 1);
			background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
			border-radius: 100vw;
			margin-left: 2vw;
		}
	}

	@keyframes cursor {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
}
</style>
